<template>
  <a-spin :spinning="confirmLoading">
 
      <a-form-model ref="formData1" style="max-width: 800px; margin: 30px auto 0;">
        <a-alert
          :closable="true"
          message="请认真填写用户基本信息，红框必填！"
          style="margin-bottom: 24px;"     />
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="选择已有用户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cusName">
              <j-popup
                v-model="formData1.cusName"
                field="cusName"
                org-fields="contact_id,name,name,address,mobile,email,certificate_type,certificate_id"
                dest-fields="contactId,name,cusName,address,mobile,email,certificateType,certificateId"
                code="arc_contact"
                :multi="true"
                @input="popupCallback"
                />
            </a-form-model-item>
            <a-input v-model="formData1.contactId" hidden ></a-input>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="formData1.name" class="inpRequire" placeholder="请输入名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
              <a-input v-model="formData1.address" class="inpRequire" placeholder="请输入联系地址"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="固定电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="telphone">
              <a-input v-model="formData1.telphone" placeholder="请输入固定电话"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系手机" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mobile">
              <a-input v-model="formData1.mobile" class="inpRequire" placeholder="请输入联系电话"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="证件类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="certificateType">
              <j-dict-select-tag type="list" v-model="formData1.certificateType" dictCode="certificate_type" placeholder="请选择证件类型" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="证件号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="certificateId">
              <a-input v-model="formData1.certificateId" class="inpRequire" placeholder="请输入证件号码"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
              <a-input v-model="formData1.email" placeholder="请输入邮箱"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="postcode">
              <a-input v-model="formData1.postcode" placeholder="请输入邮编"  ></a-input>
            </a-form-model-item>
          </a-col>         
        </a-row>
        <a-form-item :wrapperCol="{span: 19, offset: 10}">
          <a-button type="primary" @click="nextStep">下一步</a-button>
        </a-form-item>
      </a-form-model>
  </a-spin>
</template>


<script>
  export default {
    name: "ArcCusStep1",
    props: ["formData1"],
    data () {
      return {
        confirmLoading: false,
        disabled: {
          type: Boolean,
          default: false,
          required: false
        },

        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        }       
      }
    },
    methods: {
      nextStep () {
        if(this.verifyForm()){
          console.log("formData1:",this.formData1);
          this.$emit('nextStep')
        };  
        
      }, 
      verifyForm(){
        let vrs=true;
        if(! this.formData1.name){
          this.$message.warning('请填写名称');
          vrs=false;
        }
        if(! this.formData1.address){
          this.$message.warning('请填写地址');
          vrs=false;
        }
        if(! this.formData1.mobile){
          this.$message.warning('请填写手机');
          vrs=false;
        }
        if(! this.formData1.certificateId){
          this.$message.warning('请填写证件号码');
          vrs=false;
        }
        return vrs; 
      },
      popupCallback(value,row){
        this.formData1 = Object.assign(this.formData1, row);
      },
    }
  }
</script>

<style scoped>

  .inpRequire {
    border: 1px solid #974c4c;
  }

</style>